<template lang="pug">
  v-card
    v-toolbar(color="purple darken-4" dark dense)
      v-toolbar-title 附件
      v-spacer
      v-toolbar-items
    v-card-text
      FileUploader(:attachableType="attachableType", :attachableId="attachableId" @refresh="refreshAttachments")
    v-card-text
      AttachmentsGallery(ref="attachmentsGallery" :attachableId="attachableId" :attachableType="attachableType")
    v-card-actions
</template>

<script lang="ts">

  import Vue, {VueConstructor} from 'vue'
  import FileUploader from '@/components/widgets/file_uploader/FileUploader.vue'
  import AttachmentsGallery from '@/components/widgets/attachments_gallery/AttachmentsGallery.vue'

  export default (Vue as VueConstructor<Vue & {
    $refs: {
      attachmentsGallery: AttachmentsGallery
    },
  }>).extend({
    name: 'attachment_section_in_details_view',
    props: [
        "type", "id"
    ],
    computed: {
      attachableType(){
        return this.type || ''
      },
      attachableId(){
        return this.id || null
      }
    },
    methods: {
      refreshAttachments(){
        this.$refs.attachmentsGallery.refresh()
      }
    },
    components: { FileUploader, AttachmentsGallery },

  })
</script>